<template>
    <div class="page-wrap">
        <div>
            <FilterForm @change="handleSearch" />
        </div>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #systemName="{ record }"> {{ record.pmpProductDetailDTO?.systemName }} </template>
            <template #projectName="{ record, text }">
                <HToolTip :title="text">
                    <a @click.stop="showDetail(record)">{{ text }}</a>
                </HToolTip>
            </template>
            <template #version="{ record }"> {{ record.pmpVersionManagementDTO ? record.pmpVersionManagementDTO.versionNumber : '' }} </template>
            <template #pmpSignpostDTO="{ record }">
                <a @click.stop="showDetail(record)" v-if="record.pmpSignpostDTO">
                    {{ $filters.lubiaoStatusFilter(record.pmpSignpostDTO.status) }}
                </a>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import FilterForm from '@/views/lubiao/registeredProject/components/FilterForm.vue';
import { HToolTip, CustomTable } from '@/components';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { useTableLoading, usePagination, useTableColumns, useTableData, useTableFormSearch } from '@/components/Table/hooks';
import { useSystemSet } from '@/components/SysSet/hooks/useSystemSet';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';
export default defineComponent({
    components: {
        HToolTip,
        CustomTable,
        FilterForm
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('registeredProject');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(
            setLoading,
            paginationConfig,
            setPaginationConfig,
            'registeredProject'
        );
        const { system, sysSetChange } = useSystemSet(setPaginationConfig, setSearchQuery, getList);
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const showDetail = (info: any) => {
            const { id } = info;
            router.push({
                path: '/registeredProject/detail',
                query: {
                    id
                }
            });
        };
        useMountedAndActivated(getList);
        return {
            system,
            sysSetChange,
            showDetail,
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 8px 24px 12px 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
    }
    ::v-deep(.ant-input-search) {
        height: 32px;
    }
}
</style>